<template>
  <div id="user_space">
     <boxconfirm content_title="需管理员才能购买空间" content_confirm="确定" content_cancel="取消" @confirmClick="goMember" ref="bboxconfirm"></boxconfirm>
    <div class="space_head">
      <k-header headTitle="职说空间" goBack="true" rightTitle="扩充" @rightClick="expands()"></k-header>
    </div>
    <div v-if="headIos" style="z-index:9; width: 100%; height: 20px;background: white;position: fixed;top: 0;"></div>
    <div class="space_list" :class="headIos?'side-fixd-ios':'side-fixed'">
      <group class="user_spaces">
        <div class="space_nests" v-for="list in spacelist" :key='list.id'>
          <cell :title="list.fileStorageNumber + '份空间'" :value= '"到期日：" + list.createTime'></cell>
        </div>
      </group>
    </div>
    <div v-show="no_show" class="noMassage">
      <img src="../../assets/img/no-massage.png" alt="">
      <p>无报告信息</p>
    </div>
  </div>
</template>

<style scoped>
  .space_list {
    padding: 45px 0 0 0;
  }
  .side-fixd-ios {
    padding: 65px 0 0 0;
  }
  .user_spaces {
    margin: 8px 0 0 0;
  }
  .space_nests {
    border-bottom: 1px solid #f5f5f5;
  }
  .noMassage{
    height: 100%;
  }
  .noMassage img{
    display: block;
    width:4.5rem;
    height:14rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -8rem;
    margin-left: -2.2rem;
  }
  .noMassage p{
    display: block;
    width:100%;
    font-size: 1.4rem;
    color: #808080;
    text-align: center;
    height: 14rem;
    line-height: 32rem;
    position: absolute;
    top: 50%;
    margin-top: -7rem;
  }
</style>

<script>
import kHeader from '../common/head'
import { Group, Cell } from 'vux'
import util from '../../libs/util'
import { formatDate } from '../../libs/time.js'
import boxconfirm from '../common/boxconfirm'
export default {
  name: 'userspace',
  data() {
    return {
      spacelist: '',
      headIos: false,
      skt: '',
      no_show: false
    }
  },
  components: {
    kHeader,
    Group,
    Cell,
    boxconfirm
  },
  methods: {
    getdata: function() {
      var that = this;
      var url = 'lblsapp-h5/v2/personCenter/queryStorageNumberDates.json';
      util.ajax.post(url).then(function(stats) {
        that.skt = stats.data.res.msg;
        if(stats.data.res.data ==''){
          that.no_show = true;
        }
        that.spacelist = stats.data.res.data;
      }).catch(function(error) {
        console.log(error);
      })
    },
    expands: function() {
      if(this.skt == '1'){
        this.$router.push('userSpaceExpand');
      } else if(this.skt == '0'){
        this.$refs.bboxconfirm.show();
      }
    },
    goMember() {

    }
  },
  created() {
    if (window.navigator.userAgent.indexOf('LBLSIOS') > -1) {
      this.headIos = true;
    }
    this.getdata();
  }
}
</script>


